.db-btn-active {
	display: flex;
	align-items: center;
	justify-content: center;

	cursor: pointer;

	width: 80px;
	height: 32px;

	background: #c09f88;
	border-radius: 4px;

	color: #ffffff;
	font-size: 14px;
	font-family: PingFang SC, PingFang SC-Regular;
	font-weight: 400;
	line-height: 22px;
}

.db-btn {
	display: flex;
	align-items: center;
	justify-content: center;

	cursor: pointer;

	width: 80px;
	height: 32px;

	background: #f7f7f7;
	border-radius: 4px;

	color: #333333;
	font-size: 14px;
	font-family: PingFang SC, PingFang SC-Regular;
	font-weight: 400;
	line-height: 22px;
}

.db-btn-primary {
	display: flex;
	align-items: center;
	justify-content: center;

	cursor: pointer;

	width: 80px;
	height: 32px;

	background: #477afd;
	border-radius: 4px;

	color: #ffffff;
	font-size: 14px;
	font-family: PingFang SC, PingFang SC-Regular;
	font-weight: 400;
	line-height: 22px;
}

// cards布局
.db-content-cards {
	display: grid;
	grid-gap: 20px;
	grid-template-columns: repeat(3, 1fr);

	.zs-card {
		height: calc(50vh - 110px);
		overflow: auto;
	}
}

.db-content-height {
	height: calc(100vh - 127px) !important;
	overflow: auto !important;
}

.db-tag-gray {
	height: 24px;
	border-radius: 19px;
	padding: 0 12px;
	background: #f6f7fa;
	color: #999999;
	display: flex;
	justify-content: center;
	align-items: center;
}

// 表格相关样式 -- 蓝色1
.db-table-row-blue {
	background: #ebf6ff !important;
}
// 表格相关样式 -- 蓝色2
.db-table-row-blue-dark {
	background: #eef4fe !important;
}
// 表格相关样式 -- 黄色
.db-table-row-yellow {
	background: #eee2dd !important;
}

.db-table-cell-border-right {
	border-right: 1px solid #e3e3e6 !important;
}

// 标识卡片状态：new
.db-card-new::after {
	content: ' ';
	position: absolute;
	right: 0;
	top: 0;
	width: 30px;
	height: 30px;
	background: url('https://file.crehopson.com/DEFAULT/image/2024-05-20/222eb8d195183b66b9516908978086bb/cardNew.png');
	background-size: cover;
	pointer-events: none; // 穿透事件
}

// 标识卡片状态：uat
.db-card-uat::after {
	content: ' ';
	position: absolute;
	right: 0;
	top: 0;
	width: 30px;
	height: 30px;
	background: url('https://file.crehopson.com/DEFAULT/image/2024-05-20/83b77c1fb3b230229a1dcd6e0c522faf/cardUat.png');
	background-size: cover;
	pointer-events: none; // 穿透事件
}


// ----------- 虚拟表格 自定义悬浮提示 start ------------------
.db-table-self-tootip .el-table-v2__row-cell {
	overflow: initial;
}
.db-table-self-tootip .text-hide {
	overflow: initial !important;
}

.db-slef-tooltip {
	position: relative;
	display: inline-block;

	.db-tooltip-txt {
		display: inline-block;
		min-width: 20px;
	}

	.db-tooltip-content-top {
		visibility: hidden;
		min-width: 120px;
		background-color: black;
		color: #fff;
		text-align: center;
		border-radius: 3px;
		padding: 5px 10px;
		position: absolute;
		z-index: 1;
		bottom: 145%;
		left: -45px;
		opacity: 0;
		transition: opacity 0.3s;
	}

	.db-tooltip-content-top::after {
		content: '';
		position: absolute;
		bottom: -5px;
		left: 50%;
		transform: translateX(-50%);
		width: 0;
		height: 0;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 5px solid black;
	}

	.db-tooltip-content-bottom {
		visibility: hidden;
		min-width: 120px;
		background-color: black;
		color: #fff;
		text-align: center;
		border-radius: 3px;
		padding: 5px 10px;
		position: absolute;
		z-index: 1;
		bottom: -30px;
		left: -45px;
		opacity: 0;
		transition: opacity 0.3s;
	}

	.db-tooltip-content-bottom::after {
		content: "";
		position: absolute;
		bottom: 23px;
		left: 50%;
		transform: translateX(-50%);
		width: 0;
		height: 0;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-bottom: 5px solid black;
	}

	&:hover .db-tooltip-content-top,
	&:hover .db-tooltip-content-bottom {
		visibility: visible;
		opacity: 1;
	}
}
// ----------- 虚拟表格 自定义悬浮提示 end ------------------

.cursor-pointer {
	cursor: pointer;
}

.cursor-pointer:hover {
	opacity: 0.7;
}

.no-bg-select-class {
	border: 0 !important;
	background: #03093f;

	.el-select-dropdown__wrap {
		background: #03093f;
	}

	.el-select-dropdown__item.hover,
	.el-select-dropdown__item:hover {
		background: #0b2144;
	}

	.el-select-dropdown__item {
		color: #fff;
	}

	.el-select-dropdown__item.selected {
		color: #8be1ff;
	}

	.el-popper__arrow::before {
		border: 1px solid #070e4f !important;
		background: #1c2055 !important;
		right: 0;
	}

	.el-select-dropdown__empty {
		color: #8be1ff;
	}
}

.zs-body .monitor-project-select .el-select .el-input.is-focus .el-input__wrapper,
.zs-body .monitor-project-select .el-select .el-input__wrapper.is-focus {
	box-shadow: none !important;
}

.el-drawer .form-common .el-form-item:last-child {
	margin-bottom: 18px;
}